<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 微前端子应用演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css">
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        }
        
        .vue-app {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }
        
        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        }
        
        .app-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .app-title {
            font-size: 48px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 16px;
            font-weight: 700;
        }
        
        .app-subtitle {
            font-size: 18px;
            color: #666;
            margin-bottom: 32px;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .status-card {
            background: #f8f9fa;
            padding: 24px;
            border-radius: 12px;
            border-left: 4px solid #667eea;
            text-align: center;
        }
        
        .status-value {
            font-size: 32px;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 8px;
        }
        
        .status-label {
            color: #666;
            font-size: 14px;
        }
        
        .navigation-section {
            margin-top: 40px;
        }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .nav-item {
            background: #667eea;
            color: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .nav-item:hover {
            background: #764ba2;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        
        .nav-item h3 {
            margin: 0 0 8px 0;
            font-size: 18px;
        }
        
        .nav-item p {
            margin: 0;
            opacity: 0.9;
            font-size: 14px;
        }
        
        .integration-info {
            background: #e6f7ff;
            padding: 24px;
            border-radius: 12px;
            border: 1px solid #91d5ff;
            margin-top: 40px;
        }
        
        .integration-info h3 {
            color: #1890ff;
            margin-bottom: 16px;
        }
        
        .integration-info ul {
            margin: 0;
            padding-left: 20px;
            color: #666;
        }
        
        .integration-info li {
            margin: 8px 0;
        }
        
        @media (max-width: 768px) {
            .app-title {
                font-size: 32px;
            }
            
            .status-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp, ref, onMounted, computed } = Vue;
        const { createRouter, createWebHistory } = VueRouter;

        // 检测是否在微前端环境中
        const isMicroFrontend = !!window.__POWERED_BY_QIANKUN__;
        const hasParentProps = !!window.__QIANKUN_PROPS__;

        // 主组件
        const App = {
            setup() {
                const currentTime = ref(new Date().toLocaleString());
                const isLoaded = ref(false);
                const messageCount = ref(0);

                // 状态数据
                const statusData = computed(() => [
                    {
                        label: '运行状态',
                        value: '正常',
                        color: '#52c41a'
                    },
                    {
                        label: '微前端环境',
                        value: isMicroFrontend ? '是' : '否',
                        color: isMicroFrontend ? '#1890ff' : '#faad14'
                    },
                    {
                        label: '父应用连接',
                        value: hasParentProps ? '已连接' : '未连接',
                        color: hasParentProps ? '#52c41a' : '#f5222d'
                    },
                    {
                        label: '加载时间',
                        value: currentTime.value.split(' ')[1],
                        color: '#722ed1'
                    }
                ]);

                // 导航页面数据
                const pages = ref([
                    {
                        title: '首页',
                        description: '应用概览和状态展示',
                        path: '#home'
                    },
                    {
                        title: '功能演示',
                        description: 'Vue3组件和交互展示',
                        path: '#features'
                    },
                    {
                        title: '通信测试',
                        description: '微前端通信机制演示',
                        path: '#communication'
                    },
                    {
                        title: '技术文档',
                        description: '集成指南和API文档',
                        path: '#docs'
                    }
                ]);

                // 模拟通信功能
                const sendMessageToParent = () => {
                    const message = {
                        type: 'info',
                        content: `来自Vue3子应用的消息 - ${new Date().toLocaleTimeString()}`,
                        data: {
                            timestamp: Date.now(),
                            source: 'vue3-subapp'
                        }
                    };

                    // 发送事件给父应用
                    if (window.parent && window.parent !== window) {
                        window.parent.postMessage(message, '*');
                    }

                    // 发送自定义事件
                    window.dispatchEvent(new CustomEvent('vue-to-parent', {
                        detail: message
                    }));

                    messageCount.value++;
                    console.log('消息已发送给父应用:', message);
                };

                // 监听父应用消息
                const handleParentMessage = (event) => {
                    console.log('收到父应用消息:', event.data);
                    messageCount.value++;
                };

                onMounted(() => {
                    isLoaded.value = true;
                    
                    // 监听来自父应用的消息
                    window.addEventListener('message', handleParentMessage);
                    window.addEventListener('parent-to-vue', handleParentMessage);

                    // 通知父应用子应用已加载
                    if (isMicroFrontend) {
                        sendMessageToParent();
                    }

                    console.log('🎉 Vue3子应用已成功加载!', {
                        isMicroFrontend,
                        hasParentProps,
                        timestamp: new Date()
                    });
                });

                return {
                    isLoaded,
                    statusData,
                    pages,
                    messageCount,
                    sendMessageToParent,
                    isMicroFrontend,
                    hasParentProps
                };
            },
            template: `
                <div class="vue-app">
                    <div class="app-container">
                        <!-- 应用头部 -->
                        <div class="app-header">
                            <h1 class="app-title">Vue3 微前端子应用</h1>
                            <p class="app-subtitle">
                                基于 Vue 3 构建的微前端演示应用，展示与React主应用的无缝集成
                            </p>
                        </div>

                        <!-- 状态展示 -->
                        <div class="status-grid">
                            <div 
                                v-for="item in statusData" 
                                :key="item.label"
                                class="status-card"
                                :style="{ borderLeftColor: item.color }"
                            >
                                <div class="status-value" :style="{ color: item.color }">
                                    {{ item.value }}
                                </div>
                                <div class="status-label">{{ item.label }}</div>
                            </div>
                        </div>

                        <!-- 通信测试 -->
                        <div class="navigation-section">
                            <h2 style="text-align: center; color: #2c3e50; margin-bottom: 24px;">
                                微前端通信测试
                            </h2>
                            <div style="text-align: center; margin-bottom: 32px;">
                                <button 
                                    @click="sendMessageToParent"
                                    style="
                                        background: #667eea;
                                        color: white;
                                        border: none;
                                        padding: 12px 24px;
                                        border-radius: 8px;
                                        font-size: 16px;
                                        cursor: pointer;
                                        margin: 0 8px;
                                        transition: all 0.3s ease;
                                    "
                                    onmouseover="this.style.background='#764ba2'"
                                    onmouseout="this.style.background='#667eea'"
                                >
                                    发送消息给主应用 ({{ messageCount }})
                                </button>
                                <button 
                                    @click="window.location.reload()"
                                    style="
                                        background: #52c41a;
                                        color: white;
                                        border: none;
                                        padding: 12px 24px;
                                        border-radius: 8px;
                                        font-size: 16px;
                                        cursor: pointer;
                                        margin: 0 8px;
                                        transition: all 0.3s ease;
                                    "
                                    onmouseover="this.style.background='#389e0d'"
                                    onmouseout="this.style.background='#52c41a'"
                                >
                                    刷新应用
                                </button>
                            </div>
                        </div>

                        <!-- 功能页面导航 -->
                        <div class="navigation-section">
                            <h2 style="text-align: center; color: #2c3e50; margin-bottom: 24px;">
                                功能页面导航
                            </h2>
                            <div class="nav-grid">
                                <div 
                                    v-for="page in pages" 
                                    :key="page.title"
                                    class="nav-item"
                                    @click="alert('页面导航: ' + page.title + '\\n描述: ' + page.description)"
                                >
                                    <h3>{{ page.title }}</h3>
                                    <p>{{ page.description }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- 集成说明 -->
                        <div class="integration-info">
                            <h3>🔗 微前端集成说明</h3>
                            <p style="margin-bottom: 16px; color: #666;">
                                这个Vue3子应用演示了微前端架构的核心功能：
                            </p>
                            <ul>
                                <li><strong>独立运行</strong>：可以脱离主应用独立开发和测试</li>
                                <li><strong>无缝集成</strong>：通过乾坤框架集成到React主应用中</li>
                                <li><strong>样式隔离</strong>：完全隔离的样式环境，避免冲突</li>
                                <li><strong>生命周期管理</strong>：自动处理挂载、卸载等生命周期</li>
                                <li><strong>双向通信</strong>：支持与主应用的数据交互和事件传递</li>
                                <li><strong>技术栈自由</strong>：Vue3与React主应用并存</li>
                            </ul>
                            <p style="margin-top: 16px; color: #1890ff; font-weight: 500;">
                                💡 在React主应用中点击"Vue3 微应用"菜单即可体验完整的集成效果！
                            </p>
                        </div>
                    </div>
                </div>
            `
        };

        // 创建Vue应用
        createApp(App).mount('#app');

        // 全局微前端生命周期（如果需要）
        if (typeof window.__POWERED_BY_QIANKUN__ !== 'undefined') {
            console.log('📦 在微前端环境中运行');
        } else {
            console.log('🎯 独立运行模式');
        }
    </script>
</body>
</html>